<template>
  <div class="author-page-bottom">
    <chart ref="year-chart" :option="optionYearChart"></chart>
    <cloud ref="direction-cloud" :data="directions"></cloud>
    <co-authors :co-authors="coAuthors"></co-authors>
  </div>
</template>

<script>
import Chart from '@/components/Chart/Echart';
import Cloud from '@/components/Chart/WordCloud';
import CoAuthors from '@/components/List/CoAuthors';

export default {
  name: "AuthorPageBottom",
  props: {
    msg: {
      articleByYear: [],
      directions:[],
      coAuthors:[]
    }
  },
  data() {
    return {
    };
  },
  computed: {
    articleByYear() {
      return this.msg.articleByYear ?? [];
    },
    directions() {
      return this.msg.directions ?? [];
    },
    years() {
      return new Array(11).fill(0).map((value, index) => (index + 10));
    },
    coAuthors() {
      return this.msg.coAuthors ?? [];
    },
    optionYearChart() {
      const years = this.years;
      const amounts = new Array(11).fill(0);
      this.articleByYear.map((value, index) => {
        amounts[value.year - 2010] = value.amount;
      });
      return {
        title: {
          text: "Amount",
          subtext: "ArticleAmountByYear"
        },
        tooltip: {},
        legend: {
          data: ["Amount"]
        },
        xAxis: {
          data: years
        },
        yAxis: {minInterval: 1},
        series: [
          {
            name: "Amount",
            type: "bar",
            data: amounts,
            itemStyle: {
              normal: {
                // 随机显示
                color (d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                // 定制显示（按顺序）
                // color (params) { 
                //   var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8' ]; 
                //   return colorList[params.dataIndex] 
                // }
              },
            },
          }
        ]
      };
    }
  },
  created() {

  },
  mounted() {
    this.$refs['year-chart'].drawChart();
    this.$refs['direction-cloud'].drawCloud();
  },
  methods: {

  },
  components: {
    Chart,
    Cloud,
    CoAuthors
  },
};
</script>

<style scoped lang="scss">
  .author-page-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    >* {
      width: 32.8%;
      box-sizing: border-box;
      border: 1px solid #fafafa;
      box-shadow: 0 5px 8px rgba(0,0,0,.1);
      background: #fcfcfcdc;
      margin: 5px 0.2%;
      padding: 3px;
      height: 450px;

      // @media screen and (max-width: 1280px) {
      //   width: 47%;
      //   margin-bottom: 10px;
      // }

      @media screen and (max-width: 850px) {
        width: 90%;
      }

      @media screen and (max-width: 500px) {
        width: 94%;
      }
    }

    // grid-template-columns: 1fr 1fr 1fr;
    // @media screen and (max-width: 1280px){
    //   grid-template-columns: repeat(autofill, 427px);
    // }
  }
</style>
